<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
    <div class="execution">
        <basic-container>
            <el-container>
                <el-aside width="200px">
                    <avue-tree
                            class="tree"
                            :style="treeStyle"
                            :option="treeOption"
                            :data="treeData"
                            @node-click="nodeClick"/>
                </el-aside>
                <el-container>
                    <el-header height="200px">
                        <span>将选择的原市场下所有客户迁移至目标市场</span>
                        <avue-detail :option="moveOption" v-model="moveForm">
                        </avue-detail>
                        <el-button type="primary" @click="handleMove" round :loading="loading">开始迁移</el-button>
                        <el-button type="primary" @click="goBack" round>返 回</el-button>
                        <el-divider></el-divider>
                    </el-header>
                    <el-main>
                        <avue-crud ref="crud"
                                   :page.sync="page"
                                   :data="tableData"
                                   :table-loading="tableLoading"
                                   :option="tableOption"
                                   @on-load="getList"
                                   @search-change="searchChange"
                                   @refresh-change="refreshChange"
                        >
                            <template slot-scope="scope" slot="menu">
                                <el-button type="text"
                                           size="small"
                                           @click="handleSource(scope.row)">选为原市场
                                </el-button>
                                <el-button type="text"
                                           size="small"
                                           @click="handleTarget(scope.row)">选为目标市场
                                </el-button>
                            </template>
                        </avue-crud>
                    </el-main>
                </el-container>
            </el-container>
        </basic-container>
    </div>
</template>

<script>
    import {fetchList} from '@/api/crm/marketmanage';
    import {areaTree} from '@/api/crm/area';
    import {tableOption} from '@/const/crud/crm/marketmanage';
    import {moveMarket} from "../../../api/crm/marketmanage";

    export default {
        name: 'moveMarketManage',
        data() {
            return {
                treeOption: {
                    nodeKey: 'id',
                    addBtn: false,
                    menu: false,
                    props: {
                        label: 'areaName',
                        value: 'id'
                    }
                },
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption,
                treeData: [],
                tableHeight: '',
                treeStyle: {
                    maxHeight: '',
                    overflowX: scroll
                },
                loading: false,
                moveForm: {
                    sourceMarketSn: '',
                    sourceMarketName: '未选择',
                    targetMarketSn: '',
                    targetMarketName: '未选择',
                },
                moveOption: {
                    labelWidth: 100,
                    gutter: 50,
                    column: [
                        {
                            type: "input",
                            label: '原市场',
                            prop: 'sourceMarketName',
                            span: 12
                        },
                        {
                            type: "input",
                            label: "目标市场",
                            prop: "targetMarketName",
                            span: 12
                        }
                    ]
                }
            }
        },
        components: {},
        computed: {},
        created() {
            this.tableOption.delBtn = false;
            this.getHeight();
            this.getLeftList();
        },
        methods: {
            goBack(time = 1000) {
                let that = this;
                setTimeout(function () {
                    that.$store.commit('DEL_ONE_TAG', that.$route);
                    that.$router.go(-1);
                }, time);
            },
            getHeight() {
                this.tableHeight = window.innerHeight - 567;
                if (this.tableHeight < 300) {
                    this.tableHeight = 300;
                }
                this.tableOption.maxHeight = this.tableHeight + 'px';
                this.treeStyle.maxHeight = this.tableHeight + 320 + 'px';
            },
            handleSource(row) {
                this.moveForm.sourceMarketSn = row.marketSn;
                this.moveForm.sourceMarketName = row.marketName;
            },
            handleTarget(row) {
                this.moveForm.targetMarketSn = row.marketSn;
                this.moveForm.targetMarketName = row.marketName;
            },
            handleMove() {
                this.loading = true;
                let source = this.moveForm.sourceMarketSn;
                let target = this.moveForm.targetMarketSn;
                if (!source || !target) {
                    this.$message.warning("请选择原市场和目标市场");
                    this.loading = false;
                    return;
                }
                let params = {
                    sourceMarketSn: source,
                    targetMarketSn: target
                };
                moveMarket(params).then(res => {
                    if (res.data.code === 0) {
                        this.$message.success("操作成功");
                        this.goBack(2000);
                    } else {
                        this.loading = false;
                    }
                });
            },
            nodeClick(data) {
                this.page.page = 1
                this.getList(this.page, {areaSn: data.areaSn})
            },
            getList(page, params) {
                this.tableLoading = true
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params)).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                })
            },
            getLeftList() {
                areaTree().then(res => {
                    this.treeData = res.data.data
                })
            },
            /**
             * 搜索回调
             */
            searchChange(form, done) {
                this.getList(this.page, form);
                done();
            },
            /**
             * 刷新回调
             */
            refreshChange(info) {
    this.getList(this.page, this.filterForm(info.searchForm));
},
        }
    }
</script>

<style lang="scss" scoped>
    .el-header {
        color: #ff0000;
        text-align: center;

        span {
            font-size: 20px
        }
    }

    .el-main {
        padding: 0 5px !important;
    }
</style>
